// 自审频率
import { useRef, useEffect } from "react"

import createXYChart3D from "../../../utils/createXYChart3D"

const AuditFrequency = ({ data = {} }) => {
  const chartRef = useRef(null)
  const myChart = useRef(null)
  useEffect(() => {
    if (!myChart.current) {
      createXYChart3D(chartRef, myChart, data)
    }
  }, [data])

  return (
    <div className="text-[12px] h-[245px] mt-[13px] rounded-[6px] p-[10px] bg-[rgb(233,240,247)]">
      <div className=" flex items-center justify-between">
        <div
          className="w-[365px] h-[32px] leading-[32px] "
          style={{
            backgroundImage: `url('assistant-decision/base-title_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <span className="ml-[30px] text-white text-[16px] font-[600]">
            自审频率
          </span>
        </div>
        <div className="flex items-center">
          <div
            className="w-[20px] h-[20px] ml-[12px]"
            style={{
              backgroundImage: `url('assistant-decision/think_icon.png')`
            }}
          ></div>
          <div className="text-[#008BFF]">展开思考过程</div>
        </div>
      </div>
      {/* 图表 */}
      <div ref={chartRef} className="w-full h-[220px]"></div>
    </div>
  )
}

export default AuditFrequency
